<template>
	<div class="plugin_use table-theme">
		<head-title title="系统--用户插件"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="statusList" 
						:value="status" 
						placeholder="上下架"
						type="status"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="orderList" 
						:value="order_by" 
						placeholder="排序方式"
						type="order_by"
						@value="setSelectValue">
					</select-view>
					<select-view 
						v-if="order_by == 'sort'"
						:option-list="ascList" 
						:value="asc" 
						placeholder="上下架"
						type="asc"
						@value="setSelectValue">
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="userList" border>
				<el-table-column label="序号" align="center" prop="plug_list_id"></el-table-column>
				<el-table-column label="插件序号" align="center" prop="plug_id"></el-table-column>
				<el-table-column label="logo" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.store.store_logo"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="店铺序号" align="center" prop="store_id"></el-table-column>
				<el-table-column label="用户序号" align="center" prop="store.user_id"></el-table-column>
				<el-table-column label="店铺名" align="center" prop="store.store_name"></el-table-column>
				<el-table-column label="店铺序号" align="center" prop="store_id"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.plug_list_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 添加弹框 -->
		<el-dialog title="添加" :visible.sync="addDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
				<el-form-item label="店铺ID:" prop="store_id">
					<el-input v-model="addForm.store_id" placeholder="请输入店铺ID" clearable></el-input>
					
				</el-form-item>

				<el-form-item label="选择插件:" prop="plug_id">
					<el-select v-model="addForm.plug_id" placeholder="请选择">
						<el-option v-for="item in pluginList" :key="item.plug_id" :label="item.name" :value="item.plug_id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import SelectView from '@/components/SelectView';
export default {
	components: {
		ImgPopover,
		SelectView
	},
	data() {
		return {
			order_by: '',
			asc: 1,
			optionList: [
				{
					value: 0,
					label: '使用者ID'
				},
				{
					value: 1,
					label: '插件ID'
				}
			],
			searchContent: '',
			classSelect: '',
			addDialog: false,
			userList: [],
			total: 0,totalData: 0, 
			status: 1,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			orderList: [
				{
					value: 'add_time',
					label: '时间'
				},
				{
					value: 'sort',
					label: '序号'
				}
			],
			ascList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			pluginList: [],
			page: 0,
			addForm: {
				store_id: '',
				plug_id: ''
			},
			addFormRules: {
				store_id: [{ required: true, message: '请输入店铺ID' }],
				plug_id: [{ required: true, message: '请选择类型' }]
			}
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.userList = [];
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				is_show: this.status
			};

			if (this.classSelect == 0 && this.searchContent != '') {
				data.plug_list_id = this.searchContent;
			} else if (this.classSelect == 1 && this.searchContent != '') {
				data.plug_id = this.searchContent;
			}

			if (this.order_by != '') {
				data.order_by = this.order_by;
			}

			if (this.order_by == 'sort') {
				data.asc = this.asc;
			}

			this.$http(this.$ApiList.UsePlugList, data).then(res => {
				res.datas.forEach(item => {
					this.userList.push(item);
				});
				this.total = res.counts;
			});
		},

		// 上下架
		upDown(e, plug_list_id) {
			let data = {
				is_show: e,
				plug_list_id: plug_list_id
			};
			this.$http(this.$ApiList.UsePlugOut, data).then(res => {
				this.$layer.msg(res.datas);
				this.init();
			});
		},
		// 搜素
		goSearch(type, value) {
			this.searchContent = value;
			this.classSelect = type;
			this.init();
		},
		// 添加
		add() {
			this.addDialog = true;
			this.$nextTick(() => {
				this.$refs.addForm.clearValidate();
			});
		},
		// 刷新
		refreshPage() {
			this.page = 1;
			this.status = 1;
			this.searchContent = '';
			this.init();
		},
		submit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
						this.$http(this.$ApiList.UsePlugAdd, this.addForm).then(res => {
							this.$layer.msg(res.datas);
							this.addDialog = false;
							this.init();
						});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		getPluginList() {
			this.$http(this.$ApiList.PluginLists, { limit: 100 }).then(res => {
				this.pluginList = res.datas;
			});
		},
		setSelectValue(obj){
			const { value,type } = obj
			switch (type) {
				case 'status':
					this.status = value
					break;
				case 'order_by':
					this.order_by = value
					break
				case 'asc':
					this.asc = value
					break
				default:
					break;
			}
			this.init()
		}
	},
	created() {
		this.getPluginList();
		this.init();
	}
};
</script>
<style lang="scss">
.plugin_use {
}
</style>
